import React from 'react';
import '../../Chat.css';

interface NavProps {
  activeTab: string;
  onTabClick: (tab: string) => void;
}

const Nav: React.FC<NavProps> = ({ activeTab, onTabClick }) => {
  return (
    <div className="nav-tabs">
      <div
        className={`tab ${activeTab === 'all' ? 'active' : ''}`}
        onClick={() => onTabClick('all')}
      >
        <span>全部</span>
      </div>
      <div
        className={`tab ${activeTab === 'unread' ? 'active' : ''}`}
        onClick={() => onTabClick('unread')}
      >
        <span>未读</span>
      </div>
      <div
        className={`tab ${activeTab === 'mention' ? 'active' : ''}`}
        onClick={() => onTabClick('mention')}
      >
        <span>@我</span>
      </div>
      <div
        className={`tab ${activeTab === 'single' ? 'active' : ''}`}
        onClick={() => onTabClick('single')}
      >
        <span>单聊</span>
      </div>
      <div
        className={`tab ${activeTab === 'group' ? 'active' : ''}`}
        onClick={() => onTabClick('group')}
      >
        <span>群聊</span>
      </div>
    </div>
  );
};

export default Nav;
